<template>
  <div class="m-emoji">
    <span v-for="(item, index) in emoji" :key="index" @click.stop="onSelectEmoji(item)">{{item}}</span> 
  </div>
</template>

<script>
  import Emoji from './emoji.js'

  export default {
    data() {
      return {
        emoji: Emoji,
        curEmoji: ''
      }
    },
    methods: {
      onSelectEmoji(emoji) {
        this.$emit('on-select', emoji)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .m-emoji {
    position: absolute;
    left: 10px;
    bottom: 37px;
    width: 386px;
    max-height: 240px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e2e2e2;
    font-size: 0;
    // overflow-y: auto;
    span {
      display: inline-block;
      width: 28px;
      height: 28px;
      font-size: 16px;
      line-height: 24px;
      text-align: center;
      cursor: pointer;
    }
  }
</style>